<template>
  <div class="container">
    <el-card>
      <!-- 头部区域 -->
      <div class="btn_wrapper">
        <span style="font-size: 12px; color: pink">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push('new')">新增试题</el-button>
      </div>
      <el-form ref="form" :model="queryInfo" label-width="80px" id="myform">
        <!-- 第一行 -->
        <el-row type="flex" class="row-bg" justify="space-between">
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select v-model="queryInfo.subjectID" placeholder="请选择" @change="subjectChange" @focus="getsubjectList">
                <el-option v-for="(item, index) in subjectList" :key="index" :label="item.subjectName" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="queryInfo.catalogID" placeholder="请选择">
                <el-option :value="item.id" v-for="item in directoryNameList" :key="item.id" :label="item.directoryName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="queryInfo.tags" placeholder="请选择">
                <el-option v-for="(item, index) in tagsList" :key="index" :label="item.tagName" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model.trim="queryInfo.keyword" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row type="flex" class="row-bg" justify="space-between">
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="queryInfo.testQuestion" placeholder="请选择">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="简答" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="queryInfo.difficulty" placeholder="请选择">
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="queryInfo.direction" placeholder="请选择">
                <el-option v-for="(item, index) in directionList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="queryInfo.creatorID" placeholder="请选择" @focus="getCreator">
                <el-option v-for="(item, index) in creatorList" :key="index" :label="item.username" value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row type="flex" class="row-bg" justify="space-between">
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model.trim="queryInfo.remarks"></el-input>
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model.trim="queryInfo.shortName"></el-input>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select v-model="queryInfo.province" placeholder="请选择" @focus="getCity" @change="cityChange" style="width: 109px; margin-right: 5px">
                <el-option v-for="(item, index) in citySelect.province" :key="index" :label="item" :value="item"></el-option>
              </el-select>
              <el-select v-model="queryInfo.city" placeholder="请选择" style="width: 109px">
                <el-option v-for="(item, index) in citySelect.city" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="6">
            <el-form-item class="el-form-item__content">
              <el-button size="small" @click="clear">清除</el-button>
              <el-button size="small" type="primary" @click="handleFilter">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs type="border-card">
        <el-tabs :value="activeName" type="card" @tab-click="handleClick">
          <!-- 数据记录 -->
          <el-alert :title="alertText" type="info" class="alert" :closable="false" show-icon></el-alert>
          <el-tab-pane label="完成" name="all"></el-tab-pane>
          <el-tab-pane label="待审核" name="0"></el-tab-pane>
          <el-tab-pane label="已审核" name="1"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
        </el-tabs>
        <!-- table栏 -->
        <el-table :data="dataList" stripe style="width: 100%">
          <el-table-column label="试题编号" width="180">
            <template slot-scope="scope">{{ scope.row.number }}</template>
          </el-table-column>
          <el-table-column label="学科" width="180">
            <template slot-scope="scope">{{ scope.row.subject }}</template>
          </el-table-column>
          <el-table-column label="目录" width="180">
            <template slot-scope="scope">{{ scope.row.catalog }}</template>
          </el-table-column>
          <el-table-column label="题型" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === 1">单选</span>
              <span v-else-if="scope.row.questionType === 2">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column label="题干" width="220">
            <template slot-scope="scope">
              <span style="margin-left: 10px" v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }} </span>
            </template>
          </el-table-column>
          <el-table-column label="难度" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty === 0">简单</span>
              <span v-else-if="scope.row.difficulty === 1">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column label="录入人" width="180">
            <template slot-scope="scope">{{ scope.row.creator }}</template>
          </el-table-column>
          <el-table-column label="审核状态" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.chkState === 0">待审核</span>
              <span v-else-if="scope.row.chkState === 1">通过</span>
              <span v-else>拒绝</span>
            </template>
          </el-table-column>
          <el-table-column label="审核意见" width="180">
            <template slot-scope="scope">{{ scope.row.chkRemarks }}</template>
          </el-table-column>
          <el-table-column label="审核人" width="180">
            <template slot-scope="scope">{{ scope.row.chkUser }}</template>
          </el-table-column>
          <el-table-column label="发布状态" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.chkState === 0">待发布</span>
              <span v-else-if="scope.row.chkState === 1">已发布</span>
              <span v-else>拒绝</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="openPreview(scope.row)">预览</el-button>
              <el-button type="text" size="mini" @click="openCheckDialog(scope.row)" :disabled="scope.row.chkState!==0">审核</el-button>
              <el-button type="text" size="mini" :disabled="scope.row.publishState===1" @click="$router.push(`new?id=${scope.row.id}`)">修改</el-button>
              <el-button type="text" size="mini" @click="togglePublish(scope.row)">{{scope.row.publishState===1?'上架':'下架'}}</el-button>
              <el-button type="text" size="mini" :disabled="scope.row.publishState===1" @click="delQuestion(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 预览对话框 -->
        <el-dialog
            title="题目预览"
            v-model="previewShow"
            :visible.sync="previewShow"
            width="60%"
            :before-close="handleClose"
          >
          <questions-preview :questionID='questionId' />
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="previewShow = false">关闭</el-button>
          </span>
        </el-dialog>

        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(queryInfo.page)"
              :total="Number(total)"
              :page-size="Number(queryInfo.pagesize)"
              :page-sizes="[5, 10, 20, 30, 50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
      </el-tabs>
    </el-card>
     <!-- 审核 -->
    <questions-check ref="questionCheck" :data="questionInfo" @updateList="getList()"></questions-check>
  </div>
</template>

<script>
// 学科
import { list as subject } from '@/api/hmmm/subjects'
// 二级目录
import { list as directory } from '@/api/hmmm/directorys'
// 标签
import { list as tagsNameList } from '@/api/hmmm/tags'
// 数据列表
import { choice, choicePublish, remove as questionDel } from '@/api/hmmm/questions'
// 录入人
import { list as creatorUserList } from '@/api/base/users'
// 城市
import { citys, provinces } from '@/api/hmmm/citys'
// 时间过滤器
import { parseTimeByString } from '@/filters/index'
// 题目预览
import questionsPreview from '../components/questions-preview'
// 审核
import QuestionsCheck from '../components/questions-check'

export default {
  name: 'Container',
  props: {},
  components: {
    questionsPreview,
    QuestionsCheck
  },
  filters: { parseTimeByString },
  data() {
    return {
      previewShow: false,
      activeName: 'all',
      alertText: '',
      input: '',
      questionInfo: {},
      tableData: [],
      videoData: false,
      questionId: null,
      // 请求参数
      queryInfo: {
        // 当前页面
        page: 1,
        // 页码
        pagesize: 5,
        // 学科
        subjectID: null,
        // 二级目录
        catalogID: null,
        // 标签
        tags: '',
        // 关键字
        keyword: '',
        // 试题类型
        testQuestions: '',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: null,
        // 题目备注
        remarks: '',
        // 城市
        province: '',
        // 审核状态
        chkState: null
      },
      // 学科
      subjectList: [],
      // 二级目录
      directoryNameList: [],
      // 数据列表
      dataList: [],
      // 标签列表
      tagsList: [],
      chkStateList: [],
      // 试题类型
      testQuestions: '',
      // 难度
      difficulty: '',
      // 方向
      directionList: ['o2o', '外包服务', '企业服务', '互联网金融', '企业咨询', '互联网', '电子商务', '其他'],
      // 录入人
      creatorList: [],
      // 题目备注
      remarks: '',
      // 城市
      citySelect: {
        citys: [],
        province: []
      },
      background: true,
      counts: '',
      total: null
    }
  },
  created() {
    this.getList()
    var _this = this
    // 键盘 enter 操作
    window.onkeydown = function (e) {
      var key = window.event.keyword
      if (key === 13) {
        _this.handleFilter(this.queryInfo)
      }
    }
  },
  methods: {
    // tab栏数据
    handleClick(tab) {
      console.log(tab)
      if (tab.index > 0) {
        this.queryInfo.chkState = (tab.index - 1)
        this.getList()
      } else {
        this.queryInfo.chkState = null
        this.getList()
      }
    },
    // 学科
    async getsubjectList() {
      try {
        const { data } = await subject()
        this.subjectList = data.items
        // console.log(data)
      } catch (err) {
        this.$message.err('获取学科数据失败')
      }
    },
    // 二级目录
    async subjectChange(id) {
      if (!id) {
        return
      }
      // console.log(id)
      try {
        const { data } = await directory({
          subjectID: id
        })
        // console.log(data)
        this.directoryNameList = data.items
        // 标签
        const { data: res } = await tagsNameList({
          subjectID: id
        })
        console.log(res)
        this.tagsList = res.items
      } catch (err) {
        this.$message.err('二级目录获取数据失败')
      }
    },
    // 录入人
    async getCreator() {
      const { data } = await creatorUserList()
      this.creatorList = data.list
      // console.log(data)
    },
    // 城市
    getCity() {
      this.citySelect.province = provinces()
    },
    // 区
    cityChange(value) {
      this.citySelect.city = citys(value)
    },
    // 清除按钮
    clear() {
      document.getElementById('myform').reset()
    },
    // 搜索信息
    handleFilter() {
      this.queryInfo.page = 1
      this.getList(this.queryInfo)
    },
    // 获取列表数据
    async getList() {
      try {
        this.listLoading = true
        const { data: res } = await choice(this.queryInfo)
        // console.log(res)
        // console.log(res.items)
        // 获取数据给dataList
        this.dataList = res.items
        // console.log(this.dataList)
        // 获取总条数
        this.total = res.counts
        // 记录条数
        this.alertText = `共 ${this.total} 条记录`
        // 页面大小
        this.queryInfo.pagesize = res.pagesize
        // 总页数
        this.queryInfo.page = res.page
        this.listLoading = false
      } catch (err) {
        this.$message.err('获取数据列表失败')
      }
    },
    // 预览
    openPreview (row) {
      // console.log(row)
      this.questionId = row.id
      // console.log(this.questionId)
      this.previewShow = true
    },
    // 预览对话框关闭提示
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 审核
    openCheckDialog (questionInfo) {
      this.questionInfo = questionInfo
      this.$nextTick(() => {
        this.$refs.questionCheck.open()
      })
    },
    // 下架 或 下架
    async togglePublish (question) {
      await this.$confirm(`您确认${question.publishState === 1 ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      question.publishState = question.publishState === 1 ? 0 : 1
      await choicePublish(question)
      this.$message.success(`${question.publishState === 1 ? '下架' : '上架'}成功`)
      this.getList()
    },
    // 删除
    async delQuestion (question) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await questionDel(question)
      this.$message.success('删除成功')
      this.getList()
    },
    previewVisibles() {
      this.previewVisible = !this.previewVisible
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      if (this.queryInfo.page === 1) {
        this.getList(this.queryInfo)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.queryInfo.page = val
      this.getList()
    }
  }
}
</script>

<style scoped lang="less">
.container {
  .btn_wrapper {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
  }
  .el-card {
    margin: 15px;
  }
  .el-input {
    width: 100%;
  }
  .el-form-item__content {
    float: right;
  }
  .el-select {
    width: 100%;
  }
  .el-pagination {
    float: right;
  }
  .zhanshi {
    display: block;
    height: 400px;
  }
  .zhanshi .top {
    height: 70px;
    border-bottom: 1px solid #000;
  }
}
</style>
